<html>
<head>
  <meta charset="UTF-8">
  <title>testsuit</title>
  <script type="text/javascript" src="../skins/default.js"></script>
  <script type="text/javascript" src="../skins/narrow.js"></script>
  <script type="text/javascript" src="../wavedrom.min.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono|Varela+Round' rel='stylesheet' type='text/css'>
</head>

<body>

<div class="content">

<script type="WaveDrom">
{ signal: [
  {
      name: 'P1',
      wave: '==2<30>2<0xx1>2333444555',
      data: '0 1 2 a b c 3 4 5 d e f 6 7 8'
  },
  {
      name: 'P2',
      wave: '=2<15.1>2<01>2355',
      data: '0 1 2 a b c 3 4 5 d e f 6 7 8',
      period: 2
  },
  {
      name: 'P3',
      wave: '=2<1001.1>2<01.5>3',
      data: '0 1 2 a b c 3 4 5 d e f 6 7 8',
      period: 3
  },
  {
      name: 'P4',
      wave: '=2<10zuzd1x.1>2',
      data: '0 1 2 a b c 3 4 5 d e f 6 7 8',
      period: 4
  }
]}
</script>

Gaps

<script type="WaveDrom">
{ signal: [
  { name: 'clk',  wave: 'p.....'},
  { name: 'A1', wave: 'x=x|=x|=.', data: 'a1 b1' },
  { name: 'A2', wave: 'x=x|=x|=.', data: 'a2 b2', period: 2 },
  { name: 'A3', wave: 'x=x|=x|=.', data: 'a3 b3', period: 3 },
  { name: 'A4', wave: 'x=x|=x|=.', data: 'a4 b4', period: 4 },
  { name: 'B1', wave: 'x=<x|>=<x|>=.', data: 'a1 b1' },
  { name: 'B2', wave: 'x=<x|..>=<x|..>=.', data: 'a2 b2', period: 2 },
  { name: 'B3', wave: 'x=<x|....>=<x|....>=.', data: 'a3 b3', period: 3 },
  { name: 'B4', wave: 'x=<x|......>=<x|......>=.', data: 'a4 b4', period: 4 }
]}
</script>

</div>

<script>(function(){ window.addEventListener("load", WaveDrom.ProcessAll, false); })();</script>

</body>
</html>
